<template>
  <!-- 头部 -->
  <div class="title">
    <h1>用户管理</h1>
  </div>
  <!-- 用户信息表格 -->
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="用户id" prop="id" />
    <el-table-column label="注册时间" prop="updateTime" />
    <el-table-column label="用户账号" prop="name" />
    <el-table-column label="用户昵称" prop="nickname" />
    <el-table-column label="用户邮箱" prop="email" />
    <el-table-column label="收获地址" prop="address" />
    <el-table-column label="用户头像" prop="avatar">
      <!-- <el-image style="width: 100px; height: 100px" :src="dalImg(url)" /> -->
      <template v-slot="scope">
        <img :src="dalImg(scope.row.avatar)" alt="" width="90" height="90" />
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input
          style="width: 120px"
          v-model="search"
          size="small"
          placeholder="通过用户名搜索"
        />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 删除弹框 -->
  <el-dialog
    v-model="centerDialogVisible"
    title="Warning"
    width="30%"
    align-center
  >
    <span>你确定要删除{{ UserInfo }}的信息么？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="delUser()"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改弹窗-->
  <!-- Form -->
  <el-dialog v-model="dialogFormVisible" title="修改信息">
    <el-form :model="form">
      <el-form-item label="用户账号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户昵称" :label-width="formLabelWidth">
        <el-input v-model="form.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="收货地址" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户头像" :label-width="formLabelWidth">
        <el-image
          style="width: 100px; height: 100px"
          :src="dalImg(form.avatar)"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editUser()"> 修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, reactive } from "vue";
import {
  getUserApi,
  getPutUserApi,
  getDelUserApi,
  exportUserApi,
} from "../api/user";
import { ElMessage } from "element-plus";
import { dalImg } from "../utils/tool";
import axios from "axios";

//用户信息接口
interface User {
  date: string;
  name: string;
  address: string;
}
//增加接口
interface UserPost {
  id: number;
  name: string;
  nickname: string;
  address: string;
  avatar: string;
}

//修改弹窗
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = ref<UserPost>({
  id: 1,
  name: "",
  nickname: "",
  address: "",
  avatar: "",
});
// 删除弹框
const centerDialogVisible = ref<boolean>(false);
// 获取用户信息
const UserInfo = ref();
// 获取用户列表
const UserList = ref();
const search = ref("");
const filterTableData = computed(() =>
  UserList.value?.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
// 修改
const handleEdit = (index: number, row: UserPost) => {
  dialogFormVisible.value = true;
  form.value = row;
};
// 修改信息
const editUser = async () => {
  const res = await getPutUserApi(form.value);
  if (res.data.code == "200") {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "修改失败",
      type: "error",
    });
  }
  setTimeout(() => {
    dialogFormVisible.value = false;
  }, 1000);
};
// 删除
const handleDelete = (index: number, row: UserPost) => {
  UserInfo.value = row?.name;
  form.value = row;
  centerDialogVisible.value = true;
  console.log(row);
};
// 删除信息
const delUser = async () => {
  const res = await getDelUserApi(form.value.id);
  if (res.data.code == "200") {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "删除成功",
      type: "error",
    });
  }
  console.log(res.data.code);
  // dialogFormVisible.value=false
  console.log(form.value.id);
};
// 获取用户列表
const getUserList = async () => {
  const res = await getUserApi();
  UserList.value = res.data.data;
};
onMounted(() => {
  getUserList();
});
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
